<template>
    <div class="container">
        <div class="header-container">
            <div class="header">
                <div class="header-content">
                    <img :src="form.cover" class="course-cover">
                    <div class="course-title">
                        <h2>{{ form.title }}</h2>
                        <CourseTag :status="form.status" />
                    </div>
                </div>
                <el-button type="primary" v-if="!$store.state.user.isMobile" round size="large"
                    @click="$router.back()">返回</el-button>
            </div>
        </div>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

            <el-tab-pane label="课程任务" name="task">
                <TaskComponent :course_id="form.course_id" />
            </el-tab-pane>

            <el-tab-pane label="课程详情" name="info">
                <InfoComponent :courseInfo="form" />
            </el-tab-pane>

            <el-tab-pane v-if="$store.state.user.is_teacher" label="课程成员" name="member">
                <MemberComponent :course_id="form.course_id" />
            </el-tab-pane>

            <!-- <el-tab-pane v-if="$store.state.user.is_teacher" label="镜像资源" name="container">
                <Container :course_id="form.course_id" />
            </el-tab-pane> -->
            <!-- <el-tab-pane >
            </el-tab-pane> -->
            <el-tab-pane name="forum">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-badge v-if="form.unread_message_count > 0" :value="form.unread_message_count" class="item"
                            type="primary">
                            <span>课程论坛</span>
                        </el-badge>
                        <span v-else>课程论坛</span>
                    </span>
                </template>
                <Forum :course_id="form.course_id" />

            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script lang="ts" setup>
import {  ref, onMounted } from 'vue'

import { useStore } from 'vuex'

import { enterCourseApi, sendReadAllMessageApi } from '@/api/course'
import CourseTag from '@/views/main/public/publicKit/tag_course.vue'
import InfoComponent from './info/InfoComponent.vue';
import MemberComponent from './member/MemberComponent.vue';
import TaskComponent from './task/TaskComponent.vue';
import Forum from './forum/Forum.vue';

const store = useStore()
const activeName = ref(store.state.user.tabName)

const handleClick = (tab: any) => {
    // 在点击标签时，更新 activeName 的值，以显示对应的标签页
    if (tab.props.name === activeName.value) return
    if (tab.props.name === 'forum') {
        form.value.unread_message_count = 0;
        sendReadAllMessageApi({
            course_id: form.value.course_id,
            user_id: store.state.user.user_id,
        })
    }
    activeName.value = tab.props.name;
    store.commit('user/setTabName', tab.props.name)
}
const queryForm1 = ref({
    course_id: history.state.course_id,
    user_id: store.state.user.user_id,
    is_teacher: store.state.user.is_teacher
})
const form = ref({
    course_id: history.state.course_id,
    title: null,
    cover: null,
    description: '',
    term: '',
    status: null,
    create_time: null,
    update_time: null,
    start_time: null,
    end_time: null,
    stu_counts: null,
    homework_weight: null,
    exam_weight: null,
    experiment_weight: null,
    unread_message_count: 0,
});

function getCourseDetail() {

    enterCourseApi(queryForm1.value).then(res => {
        form.value = res.data;
    })
}

onMounted(() => {
    getCourseDetail()
})


</script>

<style lang="scss" scoped>
.container {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.header-container {
    background-color: #fff;
    /* 第一个div的背景颜色为白色 */
    padding: 20px;
    /* 设置容器的内边距 */
    box-sizing: border-box;
    /* 确保内边距不会增加容器尺寸 */
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.header-content {

    display: flex;
    align-items: flex-start;
}

.course-cover {
    width: 150px;
    height: 150px;
    border-radius: 2%;
    pointer-events: none;
}

.course-title {
    margin-left: 20px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;

}

@media screen and (max-width: 700px) {



    .course-cover {
        width: 70px;
        height: 70px;
        border-radius: 5%;
        pointer-events: none;
    }

    .course-title {
        font-size: 10px;

    }
}
</style>